﻿@model Lokad.Cloud.Console.WebRole.Models.Queues.QueuesModel
@{ ViewBag.Title = "Lokad.Cloud Administration Console - Queues"; }

@section Header {
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
	<script src="@Url.Content("~/Scripts/knockout-1.1.2.js")" type="text/javascript"></script>
	<script src="@Url.Content("~/Scripts/knockout.mapping.js")" type="text/javascript"></script>
}

<h1>Queue Workload</h1>
<p>This table reports the workload in the various queues of the account</p>

<table class="table">
	<tr>
		<th></th>
		<th>Queue</th>
		<th>Messages</th>
		<th>Latency</th>
	</tr>
	<tbody data-bind='template: {name: "queueRowTemplate", foreach: Queues, beforeRemove: function(e) { $(e).slideUp() }, afterAdd: function(e) { $(e).hide().slideDown() } }'></tbody>
</table>

<h2>Quarantine: Failing Messages</h2>
<p>
	Messages which fail repeatedly are persisted and removed from the queue in order to keep it healthy.
</p>
<div data-bind="visible: Quarantine().length == 0">
	No message has been considered as failing so far.
</div>
<div data-bind="visible: Quarantine().length > 0">
	The following messages have been considered as failing. Note that persisted messages may become unrestorable if their originating queue is deleted. No more than 50 messsages are shown at a time.
</div>

<div data-bind='template: { name: "quarantineTemplate", foreach: Quarantine, beforeRemove: function(e) { $(e).slideUp() }, afterAdd: function(e) { $(e).hide().slideDown() } }'></div>

<script type="text/html" id="queueRowTemplate">
	<tr>
		<td><button data-bind="click: function() { removeQueue($data) }">Delete</button></td>
		<td><b data-bind="css: { queueNameWithMessages: MessageCount() > 0 }">${QueueName}</b>
		{{each Services}}
			<br/><small>Consumed by: ${TypeName}</small>
		{{/each}}
		</td>
		<td data-bind="css: { queueMessageNumberWithMessages: MessageCount() > 0 }">${MessageCount}</td>
		<td>${Latency}</td>
	</tr>
</script>

<script type="text/html" id="quarantineTemplate">
	<h3>Queue: ${QueueName} &nbsp;&nbsp;
		<button data-bind="click: function() { restoreQuarantineQueue($data) }">Restore All</button>
		<button data-bind="click: function() { removeQuarantineQueue($data) }">Delete All</button>
	</h3>
	<div data-bind='template: { name: "messageTemplate", foreach: Messages, beforeRemove: function(e) { $(e).slideUp() }, afterAdd: function(e) { $(e).hide().slideDown() } }'></div>
</script>

<script type="text/html" id="messageTemplate">
	<div class="groupbox">
		<p>Inserted ${Inserted} but quarantined ${Persisted} &nbsp;&nbsp;
			<button data-bind="click: function() { restoreQuarantineMessage($data) }">Restore</button>
			<button data-bind="click: function() { removeQuarantineMessage($data) }">Delete</button>
		</p>
		<div class="warning" data-bind="visible: !HasData">The raw data was lost, the message is not restoreable. Maybe the queue has been deleted in the meantime.</div>
		<div class="warning" data-bind="visible: HasData && !HasXml">The XML representation of this message is not available, but message is still restoreable in its raw representation.</div>
		<pre data-bind="visible: HasXml">${Content}</pre>
		<div data-bind="visible: Reason">
		Reason:
		<pre>${Reason}</pre>
		</div>
	</div>
</script>

<script type="text/javascript">

	var viewModel = ko.mapping.fromJSON(@Html.Enquote(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)));

	removeQueue = function(queue) {
		ajaxDeleteQueue(queue);
		viewModel.Queues.remove(queue);
	};

	removeQuarantineQueue = function(queue) {
		while(message = queue.Messages.pop()) {
			ajaxDeleteQuarantineMessage(message);
		}
		viewModel.Quarantine.remove(queue);
	};
	removeQuarantineMessage = function(message) {
		ajaxDeleteQuarantineMessage(message);
		var queue = quarantineQueueOfMessage(message);
		queue.Messages.remove(message);
		if (queue.Messages().length == 0) {
			viewModel.Quarantine.remove(queue);
		}
	};

	restoreQuarantineQueue = function(queue) {
		while(message = queue.Messages.pop()) {
			ajaxRestoreQuarantineMessage(message);
		}
		viewModel.Quarantine.remove(queue);
	};
	restoreQuarantineMessage = function(message) {
		ajaxRestoreQuarantineMessage(message);
		var queue = quarantineQueueOfMessage(message);
		queue.Messages.remove(message);
		if (queue.Messages().length == 0) {
			viewModel.Quarantine.remove(queue);
		}
	};

	quarantineQueueOfMessage = function(message) {
		var queue;
		$.each(viewModel.Quarantine(), function(i,q) { if (q.Messages.indexOf(message) >= 0) { queue = q; } });
		return queue;
	};

	ajaxDeleteQueue = function(queue) {
		$.ajax({
			url: '@ViewBag.TenantPath/Queue/' + queue.QueueName(),
			type: 'DELETE',
			dataType: 'json',
			cache: false,
		});
	};
	ajaxDeleteQuarantineMessage = function(message) {
		$.ajax({
			url: '@ViewBag.TenantPath/QuarantinedMessage/' + message.Key(),
			type: 'DELETE',
			dataType: 'json',
			cache: false,
		});
	};
	ajaxRestoreQuarantineMessage = function(message) {
		$.ajax({
			url: '@ViewBag.TenantPath/RestoreQuarantinedMessage/' + message.Key(),
			type: 'POST',
			dataType: 'json',
			cache: false,
		});
	};

	$(document).ready(function () {

		ko.applyBindings(viewModel);

		$('#AjaxLoading')
			.bind("ajaxStart", function() { $(this).show() })
			.bind("ajaxStop", function() { $(this).hide() });

	});
</script>